    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>animate动画与stop</title>
        <style>
            .box{
                width: 100px;
                height: 100px;
                border: 1px solid #6f05e2;
                background: #34fff4;
                border-radius: 5px;
            }
        </style>
        <script src="../jquery-3.4.1.js"></script>
    </head>
    <body>
    <button>变！变！变！</button>
    <div class="box"></div>
    <script>
        var json1={"height":300,"width":400,"border-radius":100}
        var json2={"height":400,"width":500,"border-radius":200}
                $(function () {
                        $('button').click(function () {
                                // alert(111)
                            $('.box').animate(json1,1000,function () {
                                $('.box').animate(json2,1000,function () {
                                    alert("执行完毕！");
                                })
                            })
                        })
                })
    </script>
    </body>
    </html>